<template>
    <div class="">
        <div class="myarticles_padding" v-show="hasSelectedItems">
            <div class="myarticles_top">
                <div class="myarticles_top_left">已选择{{selectedCount}}项</div>
                <div class="myarticles_top_right">
                    <button class="top_right_list" @click="deleteSelected" :disabled="!hasSelectedItems">批量删除</button>
                    <div class="top_right_list" @click="cancelSelection">取消选择</div>
                </div>
            </div>
        </div>
        <div class="myarticles_content creation">
            <div class="creation_title">您可以关闭浏览器，生成任务会在后台运行。可以通过刷新浏览器来查看生成的文章。</div>
            <div class="myarticles_content_title">
                <div class="content_title_list">
                    <label>
                        序号
                    </label>
                </div>
                <div class="content_title_list">分类</div>
                <div class="content_title_list">标题</div>
                <div class="content_title_list">状态</div>
            </div>
            <div class="myarticles_content_tab">
                <div class="content_tab_list" :class="{ on: info.checked, active: info.is_remove }" v-for="(info, index) in infos.data" :key="index">
                    <div class="tab_list_li">
                        <label>
                            {{info.id}}
                        </label>
                    </div>
                    <div class="tab_list_li">{{info.articleClass.name}}</div>
                    <div class="tab_list_li">{{info.name}}</div>
                    <div class="tab_list_li keyframes">
                        <span v-if="!info.isActive"><img src="@a/img/sv7.svg" />创作中...</span>
                        <span v-if="info.isActive"><img src="@a/img/sv8.svg" />创建完成</span>
                    </div>

                </div>
                <div class="not_data not_data2" v-show="infos.data.length === 0">
                  <div class="not_data_icon"><img src="@a/img/bg26.jpg"/></div>
                  <div class="not_data_title">暂无创作任务，点击批量<a href="/#/writing/titleGeneration/titleGeneration" class="data_title_btn">创作标题</a></div>
                </div>
            </div>
        </div>



    </div>
</template>

<script>
    import { MessageBox } from 'element-ui';
    export default {
        name: "creation",
      props: {
        infos: {
          type: Object,
          default: {
            data: [],
            per_page: 10,
            current_page: 1,
            last_page: 1,
            total: 0
          },
        },
      },
        data() {
            return {
                showPreview: false,
              content: '',
              per_pages:[10, 20, 30],
                options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }],
                value: '',
            };
        },
        components: {

        },
      computed: {
        //全选
        selectAll: {
          get() {
            return this.infos.data.every(info => info.checked)
          },
          set(value) {
            this.infos.data.forEach(info => {
              info.checked = value
            })
          },
        },
        selectedCount() {
          return this.infos.data.filter(info => info.checked).length
        },
        allCount() {
          return this.infos.data.filter(info => info).length
        },
        hasSelectedItems() {
          return this.infos.data.filter(info => info.checked).length > 0;
        },
      },

      methods:{
        preview(id) {
          let that = this;
          let callback = () => {
            that.showPreview = !that.showPreview
          }
          that.getContent(id, callback)


        },
        getContent(id, callback) {
          let that = this;
          that.axios.get('/api/article/getContent', {
            params: {
              id: id
            }
          }).then(res => {
            if (res.code == 1) {
              that.content = res.result.content
              callback()
            }
          })
        },
        //分页
        handleSizeChange(val) {
          this.$emit('changeSize', val)
        },
        handleCurrentChange(val) {
          this.$emit('changePage', val)
        },
        //取消选择
        cancelSelection() {
          this.selectAll = false;
        },
            //批量删除
            deleteSelected() {
                MessageBox.confirm(`确定删除信息吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    // 用户点击确定后执行删除操作
                    for (let i = this.infos.length - 1; i >= 0; i--) {
                        if (this.infos[i].checked) {
                            this.infos.splice(i, 1);
                        }
                    }
                    this.selectAll = false;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                    // 用户点击取消或者弹窗关闭时不做任何操作
                });
            },
        },
    }
</script>

<style>
  @import "toBereleased.css";
</style>
